<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素之间的空白问题</title>
    <style>
        div {
          height: 200px;
          background-color: grey;
          /* 解决方法 */
          font-size: 0;
        }
        span {
          font-size: 20px;
        }
        .s1 {
          background-color: lime;
        }
        .s2 {
          background-color: #ffccff;
        }
        .s3 {
          background-color: yellowgreen;
        }
    </style>
</head>
<body>
<!--    原因:元素之间的空格时浏览器将回车解析成一个空格造成的 -->
    <div>
      <span class="s1">你好1</span>
      <span class="s2">你好2</span>
      <span class="s3">你好3</span>
      <hr>
      <img src="../images/悟空.jpg" alt="">
      <img src="../images/悟空.jpg" alt="">
      <img src="../images/悟空.jpg" alt="">
    </div>

</body>
</html>